<template>
	<view class="page_content root-safe-area">
		<view class="head_content">
			<image src="/static/mine/logo_icon.png" mode="aspectFill" style="width: 222rpx;height: 174rpx;"></image>
			<text>欢迎使用隆宇电力智慧管理平台</text>
		</view>
		<view class="user_card">
			<image class="user_card_bkg" src="/static/mine/user_card_bkg.png" mode="aspectFill" style="width: 100%;height: 100%;"></image>
			<view class="user_card_row">
				<image src="/static/mine/user_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<view class="user_card_text">
					<text class="user_car_text_key">用户名</text>
					<text class="user_car_text_value">{{userInfo.userName || '--'}}</text>
				</view>
			</view>
			<view class="user_card_row">
				<image src="/static/mine/user_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<view class="user_card_text">
					<text class="user_car_text_key">昵称</text>
					<text class="user_car_text_value">{{userInfo.nickName || '--'}}</text>
				</view>
			</view>
			<view class="user_card_row">
				<image src="/static/mine/user_phone_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<view class="user_card_text">
					<text class="user_car_text_key">电话</text>
					<text class="user_car_text_value">{{userInfo.phonenumber || '--'}}</text>
				</view>
			</view>
			<view class="user_card_row">
				<image src="/static/mine/user_desp.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<view class="user_card_text">
					<text class="user_car_text_key">职位</text>
					<text class="user_car_text_value">{{userInfo.position || '--'}}</text>
				</view>
			</view>
		</view>
		
		<view  v-if="canShow" class="info-item" @click.stop="jumpToWarning">
			<view class="left_more_view">
				<image src="/static/mine/message_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<text class="msgcenter">告警通知</text>
			</view>
			<view class="right_more_view">
				<image src="/static/mine/mine_more_icon.png" mode="aspectFill" style="width: 18rpx;height: 28rpx;"></image>
			</view>
		</view>
		
		<view class="info-item" @click.stop="jumpToMsgCenter">
			<view class="left_more_view">
				<image src="/static/mine/message_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<text class="msgcenter">消息中心</text>
			</view>
			<view class="right_more_view">
				<view v-if="unreadMsgCounts > 0 ? true : false" class="unreadMsgClass">{{unreadMsgCounts}}</view>
				<image src="/static/mine/mine_more_icon.png" mode="aspectFill" style="width: 18rpx;height: 28rpx;"></image>
			</view>
		</view>
		
		<view class="info-item" @click.stop="logout">
			<view class="left_more_view">
				<image src="/static/mine/logout_icon.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
				<text class="exitlogin">退出登录</text>
			</view>
			<view class="right_more_view">
				<image src="/static/mine/mine_more_icon.png" mode="aspectFill" style="width: 18rpx;height: 28rpx;"></image>
			</view>
		</view>
		
		<view class="version_info">{{versionInfo}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
				},
				unreadMsgCounts:0
			}
		},
		computed:{
			badgeCount(){
				let count = this.unreadMsgCounts
				if(count && count > 0){
					uni.setTabBarBadge({
					  index: 3,
					  text: count+''
					});
				}
			},
			canShow(){
				let  canShowAlarmSetting = this.$weixinAuth.canAlarmSetting();
				console.log("canShowAlarmSetting",canShowAlarmSetting);
				return canShowAlarmSetting;
			},
			versionInfo(){
				return this.$versionInfo;
			}
		},
		onShow(){
			this.$weixinAuth.isNeedRegister().then(ok=>{
				if(ok.needRegister) {
					this.$Router.push('/pages/register/register')
				} else {
					this.loadData()
				}
			})
		},
		methods: {
			loadData(){
				this.userInfo = this.$userMgr.getCurrentLoginUser() || {}
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.getMethod('/loyu-api/app/message/info/unread/num').then(ok => {
					self.$progressHud.hideLoading();
					self.unreadMsgCounts = ok.data;
					
					if(self.unreadMsgCounts > 0) {
						uni.setTabBarBadge({
						  index: 3,
						  text: self.unreadMsgCounts + ''
						})
					} else {
						uni.removeTabBarBadge({
							index:3
						})
					}
					
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			jumpToMsgCenter(e){
				let row = e.currentTarget.dataset.row;
				this.$Router.push({
					path:'/modules/messages/pages/msglist/msglist',
					query:{}
				})
			},
			jumpToWarning(e){
				let row = e.currentTarget.dataset.row;
				this.$Router.push({
					path:'/modules/warnings/pages/warningNotification/warningNotification',
					query:{}
				})
			},
			logout(){
				this.$userMgr.clearUserCache();
				
				// #ifdef MP-WEIXIN
				wx.exitMiniProgram({
				    success: () => console.log("退出成功"),
				    fail: (err) => console.error("退出失败", err)
				  });
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
.page_content{
	width: 100%;
	min-height: 100%;
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.head_content{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 64rpx;
	row-gap: 64rpx;
	
	font-family: Roboto;
	font-size: 40rpx;
	font-weight: 500;
	line-height: 40rpx;
	text-align: center;
	letter-spacing: normal;
	color: #4B5563;
}

.user_card{
	width: calc(100% - 64rpx);
	margin-left: 32rpx;
	margin-right: 32rpx;
	margin-top: 64rpx;
	padding: 32rpx;
	
	border-radius: 24rpx;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
	box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
	
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 24rpx;
}
.user_card_bkg{
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	position: absolute;
}
.user_car_text_key{
	font-family: Roboto;
	font-size: 28rpx;
	font-weight: normal;
	line-height: 40rpx;
	letter-spacing: normal;
	color: #6B7280;
}
.user_car_text_value{
	font-family: Roboto;
	font-size: 28rpx;
	font-weight: 500;
	height: 42rpx;
	line-height: 42rpx;
	letter-spacing: normal;
	color: #000000;
}
.user_card_row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: 16rpx;
}
.user_card_text{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.right_more_view{
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 16rpx;
}
.unreadMsgClass {
	border-radius: 9999px;
	background: $power-color-error;
	
	padding: 0px 20rpx;
	z-index: 0;
	color: #FFF;
	text-align: center;
}
.left_more_view{
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 24rpx;
}
.info-item{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	
	margin-top: 32rpx;
	margin-left: 32rpx;
	margin-right: 32rpx;
	width: calc(100% - 64rpx);
	padding: 32rpx;
	border-radius: 8rpx;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
	box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
}

.msgcenter{
	font-size: 28rpx;
	font-weight: normal;
	line-height: 42rpx;
	text-align: center;
	letter-spacing: normal;
	color: #374151;
}

.exitlogin{
	font-size: 28rpx;
	font-weight: normal;
	line-height: 42rpx;
	text-align: center;
	letter-spacing: normal;
	color: $power-color-error;
}

.version_info{
	width: 100%;
	text-align: center;
	
	font-family: Roboto;
	font-size: 24rpx;
	font-weight: normal;
	line-height: 40rpx;
	height: 40rpx;
	text-align: center;
	letter-spacing: normal;
	color: #999999;
	
	margin-top: 32rpx;
}
</style>
